<template>
  <div class="InvitationCode" :style="'min-height: ' + docheight + 'px'">
    <div v-if="!showTimeOut && showCont">
      <div class="codeHead">
        <div class="codeheadCenter">
          <div class="userImg">
            <img :src="userInfo.technician_head_img" />
          </div>
          <div class="userInfo">
            <div class="userName">
              <div class="userNameLeft">
                <div>Hi,{{ userInfo.technician_name }}</div>
                <div class="statusTag" v-if="userInfo.service_status == 1">
                  可服务
                </div>
                <div
                  class="statusTag greenTag"
                  v-if="userInfo.service_status == 2"
                >
                  服务中
                </div>
                <div
                  class="statusTag blackTag"
                  v-if="userInfo.service_status == 3"
                >
                  休息中
                </div>
              </div>
              <div class="statusBtn iconfont icon-set" @click="setFn"></div>
            </div>
            <div
              class="infoDes"
              v-if="userInfo.rest_time && userInfo.service_status == 1"
            >
              休息时间：{{ userInfo.rest_time }}
            </div>
            <div class="subMoney">
              累计提现：{{ userInfo.already_withdrawal }}元
            </div>
          </div>
        </div>
        <div class="carCont" v-if="userInfo.month_data">
          <div class="carItem">
            <div class="carName">本月业绩</div>
            <div class="carText">{{ userInfo.month_data.month_tc }}</div>
          </div>
          <div class="carItem">
            <div class="carName">本月奖金</div>
            <div class="carText">{{ userInfo.month_data.month_jj }}</div>
          </div>
          <div class="carItem">
            <div class="carName">本月订单</div>
            <div class="carText">{{ userInfo.month_data.month_order }}</div>
          </div>
          <div class="carItem">
            <div class="carName">总业绩</div>
            <div class="carText">{{ userInfo.all_data.all_tc }}</div>
          </div>
          <div class="carItem">
            <div class="carName">总奖金</div>
            <div class="carText">{{ userInfo.all_data.all_jj }}</div>
          </div>
          <div class="carItem">
            <div class="carName">总订单</div>
            <div class="carText">{{ userInfo.all_data.all_order }}</div>
          </div>
        </div>
        <div class="codeInput">
          <van-field
            v-model="code"
            label="订单核销"
            placeholder="请输入核销码"
          />
          <save-btn
            style="width: 100%;"
            value="核销订单"
            @saveClick="saveFn"
          ></save-btn>
        </div>
      </div>
      <div class="mainItem">
        <div class="mainItemName">服务流程</div>
        <ul>
          <li>客户选技师下单</li>
          <li>技师选择<span class="redText">接单</span></li>
          <li>
            在预约服务时间之前到达服务地点<span class="redText">联系</span>客户
          </li>
          <li>进行<span class="redText">订单核销</span>并开始服务项目</li>
          <li>服务结束，<span class="redText">离开</span>服务地点即可</li>
        </ul>
      </div>
      <div class="mainItem">
        <div class="mainItemName">奖励规则</div>
        <ul>
          <li>累计到5000金额提现，可额外奖励80元。</li>
          <li>累计到10000金额提现，可额外奖励200元。</li>
          <li>
            每服务一单，若用户给出五星+10字以上<span class="redText">好评</span
            >，可额外奖励此订单<span class="redText">2%奖金</span>。
          </li>
          <li>
            初始提成为每一单70%；每累计服务100单，可提升1%的提成，最高可达80%。
          </li>
        </ul>
      </div>
      <div class="mainItem">
        <div class="mainItemName">惩罚规则</div>
        <ul>
          <li>
            *若被举报线下交易、涉黄、赌博、吸毒等违规违法行为。一经发现，将<span
              class="redText"
              >扣除300元</span
            >保证金，并永久<span class="redText">停封账号</span
            >永远终止合作，且造成的违法行为由个人承担全部责任。
          </li>
          <li>
            若已接单，但出现<span class="redText">爽约</span>情况，<span
              class="redText"
              >扣除100元</span
            >保证金。
          </li>
          <li>
            若已接单，到达客户预约服务时间还未达到指定服务地点，若预约服务时间开始20分钟后，还未进行订单核销，则被视为<span
              class="redText"
              >迟到</span
            >。<span class="redText">扣除30元</span>保证金。
          </li>
          <li>
            若已接单，超过预约服务时间120分钟未进行核销订单，则视为<span
              class="redText"
              >爽约</span
            >，<span class="redText">扣除100元</span>保证金。
          </li>
        </ul>
      </div>
      <div class="mainItem">
        <div class="mainItemName">技师守则</div>
        <ul>
          <li>
            专业素质：拥有相关按摩从业资质和专业技能，确保为用户提供高水平的按摩服务。
          </li>
          <li>
            服务态度：以亲切、专业的态度对待每位顾客，主动了解顾客需求，确保服务个性化。
          </li>
          <li>
            隐私保护：严格保守顾客隐私，不得泄露或分享任何个人信息给第三方。
          </li>
          <li>按摩环境：保持按摩环境整洁、舒适，提供愉悦的服务氛围。</li>
          <li>
            禁止违法行为：严禁提供、参与任何违法、淫秽、色情等不当服务。确保服务合法合规。
          </li>
          <li>
            无线下交易：禁止与顾客进行线下现金交易，所有交易应通过平台提供的安全支付系统完成。
          </li>
          <li>遵守预定规定：严格遵守平台的预定规定，不得私自接受线下预定。</li>
          <li>自我提升：持续学习和提升按摩技能，保持对行业新知识的敏感性。</li>
          <li>
            规范言行：与顾客保持尊重和谐的沟通，避免使用不适当的语言和行为。
          </li>
          <li>
            合作共赢：与平台共同维护秩序，如发现违规行为及时报告，共同打造一个安全、可信的服务平台。
          </li>
        </ul>
      </div>
      <sub-load v-if="showLoad"></sub-load>
    </div>
    <div class="heplItem" @click="telFn">
      <div class="iconfont icon-alarm"></div>
      <div>报警</div>
    </div>
    <footcpm></footcpm>
    <toast
      v-model="showToast"
      position="middle"
      width="50%"
      type="text"
      :time="1000"
      >{{ showText }}</toast
    >
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
import { Toast } from "vux";
import SaveBtn from "@/components/public/saveBtn.vue";
import subLoad from "@/components/public/subLoad.vue";
import getLoad from "@/components/public/getLoad";
import getTimeOut from "@/components/public/getTimeOut";
import footcpm from "@/components/footcpm";
import { index, verificationOrder } from "@/http/api";
export default {
  components: { getTimeOut, getLoad, subLoad, Toast, SaveBtn, footcpm },
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showLoad: false,
      showText: "",
      showToast: false,
      showPicker: false,
      code: "",
      userInfo: {}
    };
  },
  props: {},
  methods: {
    onConfirm(item) {
      this.type = item.text;
      this.typeVal = item.value;
      this.showPicker = false;
    },
    setFn() {
      this.$router.push({ path: "/linkProduct" });
    },
    telFn() {
      window.location.href = "tel:110";
    },
    saveFn() {
      if (this.code.length < 6) {
        this.showToast = true;
        this.showText = "请输入正确核销码";
        return false;
      }
      let data = {
        verification_code: this.code
      };
      if (!this.showLoad) {
        this.showLoad = true;
        verificationOrder(data)
          .then(res => {
            this.showToast = true;
            if (res.data.code == 1) {
              this.showText = "核销成功";
              this.getData();
              this.code = "";
            } else {
              this.showText = res.data.msg;
            }
            this.showLoad = false;
          })
          .catch(err => {
            this.showLoad = false;
            this.showToast = true;
            this.showText = "网络超时";
          });
      }
    },
    getData() {
      let data = {};
      index(data)
        .then(res => {
          this.showCont = true;
          if (res.data.code == 1) {
            this.userInfo = res.data.data;
          } else {
            this.showToast = true;
            this.showText = "数据获取失败";
          }
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    }
  },
  mounted() {},
  created() {
    this.getData();
  }
};
</script>

<style scoped lang="less">
.InvitationCode {
  width: 100%;
  background-color: #f7f8fa;
  box-sizing: border-box;
  padding-bottom: 3.25rem;
  padding-top: 1rem;
  .codeHead {
    padding: 0.75rem;
    box-sizing: border-box;
    width: 92%;
    background-color: #fff;
    margin: 0 auto 1rem;
    border-radius: 0.25rem;
    .codeheadCenter {
      font-size: 0.8rem;
      font-weight: bold;
      margin: 0.75rem 0;
      display: flex;
      position: relative;
      .userImg {
        width: 3.75rem;
        width: 3.75rem;
        font-size: 0px;
        margin-right: 0.75rem;
        border-radius: 50%;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      .userInfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        width: 2rem;
        .userName {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .userNameLeft {
            display: flex;
            align-items: center;
            .statusTag {
              padding: 0.1rem 0.5rem;
              background-color: #4fc763;
              font-size: 0.6rem;
              color: #fff;
              border-radius: 0.1rem;
              font-weight: normal;
              margin-left: 0.75rem;
            }
            .blackTag {
              background-color: #ebebeb;
              color: #666;
            }
            .greenTag {
              background-color: #85ce61;
              color: whtie;
            }
          }
          .statusBtn {
            font-size: 0.6rem;
            font-size: 1rem;
            color: #4fc763;
          }
        }
        .infoDes,
        .subMoney {
          font-size: 0.6rem;
          color: #4fc763;
          margin-top: 0.3rem;
          font-weight: normal;
          span {
            margin-right: 0.25rem;
          }
        }
        .infoDes {
          color: #666;
        }
      }
    }
    .carCont {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0.75rem 0;
      .carItem {
        width: 30%;
        // background-color: #4fc763;
        // color: white;
        text-align: center;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        box-sizing: border-box;
        border-radius: 0.5rem;
        font-size: 0.7rem;
        .carText {
          margin-top: 0.25rem;
          font-size: 1rem;
          // font-weight: bold;
        }
      }
    }
    .codeInput {
      padding-top: 0.75rem;
    }
  }
  .mainItem {
    width: 92%;
    border-radius: 0.25rem;
    background-color: #fff;
    padding: 0.75rem;
    box-sizing: border-box;
    margin: 0.75rem auto;
    .mainItemName {
      text-align: center;
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }
    ul {
      list-style: outside;
      padding-left: 1rem;
      box-sizing: border-box;
    }
    .redText {
      color: #f56c6c;
    }
  }
  .heplItem {
    background-color: #4fc763;
    color: white;
    font-size: 0.7rem;
    width: 3rem;
    height: 3rem;
    text-align: center;
    box-sizing: border-box;
    padding: 0.5rem 0 0;
    border-radius: 0.25rem;
    position: fixed;
    bottom: 4rem;
    right: 0.75rem;
    .iconfont {
      font-size: 0.9rem;
    }
  }
}
</style>
<style>
.InvitationCode .van-cell::after {
  border-bottom: none;
}
</style>
